<template>
    <div class="content">
        <div class="table-content">
            <template>
                <div class="form">
                    <el-form style="display: flex;" label-width="100px" :model="form">
                        <el-form-item label="驾驶员姓名:">
                            <el-input class="input-btn" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="电话:">
                            <el-input class="input-btn" placeholder="请输入电话"></el-input>
                        </el-form-item>
                        <el-form-item label="日期:">
                            <el-date-picker v-model="form.time" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-button style="margin-left: 20px; height: 40px;" type="primary">查询</el-button>
                    </el-form>
                    <el-button type="primary">新增俄罗斯驾驶员</el-button>
                </div>
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="sort" label="序号" width="80">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="age" label="年龄" width="80">
                    </el-table-column>
                    <el-table-column prop="type" label="驾照类型" width="120">
                    </el-table-column>
                    <el-table-column prop="time" label="拿证时间" width="120">
                    </el-table-column>
                    <el-table-column prop="phone" label="电话号" width="120">
                    </el-table-column>
                    <el-table-column prop="passport" label="护照" width="120">
                    </el-table-column>
                    <el-table-column prop="license" label="货运上岗证" width="120">
                    </el-table-column>
                    <el-table-column prop="idcard" label="身份证" min-width="220">
                    </el-table-column>
                    <el-table-column prop="introducer" label="介绍人" width="120">
                    </el-table-column>
                    <el-table-column prop="interviewTime" label="面试日期" width="120">
                    </el-table-column>
                    <el-table-column prop="mark" label="备注" width="120">
                    </el-table-column>
                    <el-table-column prop="" label="操作" width="200" fixed="right">
                        <template>
                            <div style="display: flex;">
                                <el-button type="primary">编辑</el-button>
                                <el-button type="danger">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: "Dashboard",
    data() {
        return {
            loading: false,
            tableData: [
                {
                    sort: "1",
                    name: "李华",
                    age: "22",
                    type: "B2",
                    time: "2020-01-15",
                    phone: "987654321",
                    passport: "987654321",
                    license: "987654321",
                    idcard: "987654321",
                    introducer: "张三",
                    interviewTime: "2020-01-15",
                },
                {
                    sort: "2",
                    name: "张伟",
                    age: "25",
                    type: "C1",
                    time: "2021-03-20",
                    phone: "555666777",
                    passport: "555666777",
                    license: "555666777",
                    idcard: "555666777",
                    introducer: "李四",
                    interviewTime: "2021-03-20",
                },
                {
                    sort: "3",
                    name: "赵雷",
                    age: "30",
                    type: "A1",
                    time: "2018-12-10",
                    phone: "111222333",
                    passport: "111222333",
                    license: "111222333",
                    idcard: "111222333",
                    introducer: "王五",
                    interviewTime: "2018-12-10",
                },
                {
                    sort: "4",
                    name: "刘洋",
                    age: "28",
                    type: "B2",
                    time: "2019-07-25",
                    phone: "777888999",
                    passport: "777888999",
                    license: "777888999",
                    idcard: "777888999",
                    introducer: "陈六",
                    interviewTime: "2019-07-25",
                },
                {
                    sort: "5",
                    name: "孙丽",
                    age: "24",
                    type: "C1",
                    time: "2022-05-05",
                    phone: "333444555",
                    passport: "333444555",
                    license: "333444555",
                    idcard: "333444555",
                    introducer: "周七",
                    interviewTime: "2022-05-05",
                }
            ],
            form: {
                time: "",
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
    width: 100%;
    height: 820px;
    background: rgb(255, 255, 255);
    margin-top: 10px;
    margin-right: 10px;
    // 设置边框
    border: 1px solid #ccc;
    position: relative;

}

::v-deep .el-pagination {
    float: right;
    margin-top: 10px;
    margin-bottom: 25px;
}

::v-deep .el-table thead th {
    background-color: #f5f7fa;
    color: #000 !important;
    border: 1px solid #fff;
    font-weight: 700;
    text-align: center;
}

.form {
    padding: 10px;
}

.input-btn {
    width: 200px;
}
</style>